<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<!--引入ECharts脚本-->
	<script src="js/echarts.js"></script>
</head>

<body>
	<!---为ECharts准备一个具备大小（宽高）的DOM-->
	<div id="main" style="width: 900px; height: 600px"></div>
	<script type="text/javascript">
		//基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		//指定图表的配置项和数据
		var option = {
			tooltip: {  //配置提示框组件
				trigger: 'axis',
				axisPointer:
				{
					type: 'shadow',
					lineStyle: {
						color: '#48b', width: 2, type: 'solid'
					},
					crossStyle: {
						color: '#1e90ff', width: 1, type: 'dashed'
					},
					shadowStyle: {
						color: 'rgba(150,150,150,0.2)', width: 'auto', type: 'default'
					}
				},
				showDelay: 0, hideDelay: 0, transitionDuration: 0,
				backgroundColor: 'rgba(0,222,0,0.5)',
				borderColor: '#f50', borderRadius: 8, borderWidth: 2,
				padding: 10,
				position: function (p) {
					//位置回调
					//console.log && console.log(p);
					return [p[0] + 10, p[1] - 10];
				},
				textStyle: {
					color: 'blue', decoration: 'none', fontFamily: 'sans-serif',
					fontSize: 15, fontStyle: 'normal', fontWeight: 'bold'
				},
				formatter: function (params, ticket, callback) {
					console.log(params)
					var res = '详情提示框 : <br/>' + params[0].name;
					for (var i = 0, l = params.length; i < l; i++) {
						res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
					}
					setTimeout(function () {
						//仅为了模拟异步回调
						callback(ticket, res);
					}, 500)
					return 'loading';
				}
				//formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
			},
			toolbox: {  //配置工具箱组件
				show: true,
				feature: {
					mark: { show: true }, dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
					restore: { show: true }, saveAsImage: { show: true }
				}
			},
			calculable: true,
			xAxis: {  //配置x轴坐标系
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
			},
			yAxis: {  //配置y轴坐标系
				type: 'value'
			},
			series: [  //配置数据系列
				{   //设置数据系列1
					name: '坐标轴触发1', type: 'bar',
					data: [
						{ value: 320, extra: 'Hello~' },
						332, 301, 334, 390, 330, 320
					]
				},
				{   //设置数据系列2
					name: '坐标轴触发2', type: 'bar',
					data: [862, 1018, 964, 1026, 1679, 1600, 157]
				},
				{   //设置数据系列3
					name: '数据项触发1', type: 'bar',
					tooltip: {
						trigger: 'item', backgroundColor: 'black', position: [0, 0],
						formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
					},
					stack: '数据项',
					data: [
						120, 132,
						{
							value: 301, itemStyle: { normal: { color: 'red' } },
							tooltip: {
								backgroundColor: 'blue',
								formatter: "Data formatter: <br/>{a}<br/>{b}:{c}"
							}
						},
						134, 90,
						{ value: 230, tooltip: { show: false } },
						210
					]
				},
				{   //设置数据系列4
					name: '数据项触发2', type: 'bar',
					tooltip: {
						show: false, trigger: 'item'
					},
					stack: '数据项', data: [150, 232, 201, 154, 190, 330, 410]
				}
			]
		};

		//使用刚指定的配置项和数据显示图表
		myChart.setOption(option); 
	</script>
</body>

</html>